<template>
	<view class="log-item">
		<view class="lesson-title">
			<view class="lesson-title-title">课时详情</view>
		</view>
		<view class="lesson-consume">
			上课时间：<text class="lesson-consume-val">{{ detail.lessontime }}</text>
		</view>
		<view class="lesson-teacher">
			上课内容：<text class="lesson-teacher-val">{{ detail.lesson_name }}</text>
		</view>
		<view class="lesson-teacher">
			消耗课时：<text class="lesson-teacher-val">{{ detail.consume }}</text>
		</view>
		<view class="lesson-teacher">
			剩余课时：<text class="lesson-teacher-val">{{ detail.after }}</text>
		</view>
		<view class="lesson-teacher">
			上课老师：<text class="lesson-teacher-val">{{ detail.teacher_name }}</text>
		</view>
		<view class="lesson-teacher lesson-comment">
			课程备注：<text class="lesson-teacher-val lesson-comment-val">{{ detail.comment }}</text>
		</view>
	</view>
</template>
<script>
	import { getLessonLogDetail }  from "@/http/lessonLog.js"
	export default {
		data() {
			return {
				id: 0,
				detail: {
					lessontime: '',
					consume: '',
					teacher_name: '',
					after: '',
					comment: '',
					lesson_name: '',
				},
			}
		},
		onLoad(options) {
			console.warn(options);
			this.id = options.id;
			this.initData();
		},
		methods: {
			initData() {
				uni.showLoading({
					title: '加载中..'
				});
				getLessonLogDetail({
					id: this.id
				}).then((res) => {
					Object.assign(this.detail, res);
				}).catch((err) => {
					console.warn(err);
				}).finally(() => {
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style>
	.log-item {
		background-color: white;
		padding: 10px 10px 10px;
	}
	.lesson-title {
		display: flex;
	}
	.lesson-title-title {
		font-size: 15px;
		position: relative;
		padding-left: 10px;
		flex: 1;
	}
	.lesson-title-title::before {
		content: ' ';
		display: inline-block;
		width: 2px;
		height: 14px;
		position: absolute;
		left: 0;
		top: 50%;
		background-color: orangered;
		transform: translateY(-50%);
	}
	.lesson-title-time {
		font-size: 12px;
		color: lightgray;
	}
	.lesson-consume, .lesson-teacher {
		margin-top: 10px;
		font-size: 14px;
		color: darkgray;
	}
	.lesson-teacher {
		margin-top: 3px;
	}
	.lesson-consume-val, .lesson-teacher-val {
		color: #333;
	}
	.lesson-comment {
		display: flex;
	}
	.lesson-comment-val {
		flex: 1;
	}
</style>
